<template>
  <div class="login_wrap">
    <bg-canvas></bg-canvas>
    <h1>清华大学管理系统</h1>
    <div class="login_wrap">
      <div>
        <el-form
          ref="ruleForm"
          class="myform"
          :model="loginObj"
          :rules="formRules"
        >
          <el-form-item prop="username">
            <el-input v-model="loginObj.username" placeholder="输入用户名">
              <template slot="prepend">
                <i class="el-icon-user-solid"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginObj.password" placeholder="输入密码">
              <template slot="prepend">
                <i class="el-icon-pie-chart"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="veri_wrap" prop="veri">
            <el-input v-model="loginObj.veri" placeholder="验证码">
              <template slot="prepend">
                <div>
                  <i class="el-icon-aim"></i>
                </div>
              </template>
            </el-input>
            <!-- 验证码组件 -->
            <veri-com></veri-com>
          </el-form-item>
          <el-form-item class="btn_wrap">
            <el-button class="pass" type="primary">忘记密码</el-button>
            <el-button @click="submitForm()" class="login_btn" type="success"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import bgCanvas from './bgCanvas.vue'
import veriCom from './veriCom.vue'
import { _checkVeri, _Login } from '../../api/login'
export default {
  data () {
    return {
      loginObj: {
        //v-model需要的数据
        username: '',
        password: '',
        veri: ''
      },
      formRules: {
        //表单验证规则
        username: {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
        veri: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^\w{4}$/, message: '验证码格式错误', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    bgCanvas,
    veriCom
  },
  created () {},
  methods: {
    submitForm () {
      //表单提交事件
      console.log(1111)
      // 表单验证方法
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          // 发送校验验证码接口
          var veriRes = await _checkVeri(this.loginObj.veri)
          console.log(veriRes)
          if (veriRes.success) {
            // 发送登录接口
            var loginRes = await _Login({
              userName: this.loginObj.username,
              password: this.loginObj.password
            })
            console.log(loginRes)
            if (loginRes.success) {
              //登录成功
              localStorage.tokenId = loginRes.tokenId
              // 表单重置
              this.$refs.ruleForm.resetFields()
              // 跳转主页 不产生历史记录
              this.$router.replace('/layout')
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="less">
body {
  background: rgb(12, 24, 84);
}

.login_wrap {
  position: relative;
  h1 {
    width: 100%;
    color: white;
    text-align: center;
    position: absolute;
    top: 200px;
  }
  .login_wrap {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -400px;
  }
}
.myform {
  height: 400px;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.veri_wrap {
  .el-form-item__content {
    display: flex;
    .el-input {
      width: 300px;
    }
  }
}
.btn_wrap {
  display: flex;
  position: relative;
  .el-form-item__content {
    width: 100%;
    .pass {
      position: absolute;
      left: -10%;
    }
    .login_btn {
      position: absolute;
      right: -10%;
    }
  }
}
</style>
